The latest updates on your projects. Learn more about Vercel for Git ↗︎

Overall this looks alright and I requested some minor changes for clarity. However, I am worried about this approach because now we're creating an observable for every item in a list, which is probably fine for small lists but may impact performance in larger lists - especially those with content that changes.

I think you should try to see if you can do the same thing with existing Stencil lifecycle hooks, such as componentDidRender, which should, from my understanding, already hook into the changes you're looking for. Possibly even componentDidUpdate - but be warned that only fires after the first render. If you went this path you'd need to do a check after first render, too. I'd encourage exploring those paths before continuing down this one.

Awesome, thank you for the feedback. I'll look back at the lifecycle hooks again and see if I can come up with a more performant solution.

@ShaneK I replaced the MutationObserver with a slotchange handler that should effectively be doing the same thing but still might feel heavy handed. For this issue the parent needs to potentially render again when the nested content changes and I can't find anything built into Stencil like that - since the parent component itself isn't updating, none of the lifecycle hooks are firing. I think attaching three handlers per component may be slightly more performant than a mutation observer. My understanding is that the slots themselves are preserved between renders so they are not being recreated.